<template>
	<view class="z-card px-24">
		<view v-if="detail.status == '待支付'" class="py-24 fd-r">
			<text class="flex1 fw-b">红麦商城</text>
			<text class="c-red">待支付</text>
		</view>
		<view v-else class="py-24 fd-r">
			<text class="flex1 fw-b">{{ detail.tenantName }}</text>
			<text class="c-orange">{{ detail.status }}</text>
		</view>
		<view class="divider"></view>

		<view class="py-24 fd-r">
			<block v-for="item in detail.goodList">
				<image
					class="w-160 h-160 mr-12 rd-8"
					:src="item.banner[0]"
					mode="aspectFill"
				></image>
			</block>
		</view>
		<view class="divider"></view>

		<view class="py-12">
			<view class="py-12 fd-r">
				<text class="flex1">共{{ detail.quantity }}件商品</text>
				<text class="c-grey">实付：￥{{ detail.payAmount }}</text>
			</view>

			<view class="py-12 fd-r">
				<text class="flex1">订单号</text>
				<text class="c-grey">{{ detail.orderNo }}</text>
			</view>
			
			<view class="py-12 fd-r">
				<text class="flex1">下单时间</text>
				<text class="c-grey">{{ detail.createTime }}</text>
			</view>
			
			<view v-if="detail.status != '待支付'" class="py-12 fd-r">
				<text class="flex1">支付时间</text>
				<text class="c-grey">{{ detail.payTime }}</text>
			</view>
		</view>

		<slot></slot>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
	detail: {
		type: Object,
		default: () => ({})
	}
});
</script>

<style lang="scss" scoped></style>
